<template>
    <div class="wrap">
        <div class="timer" v-if="begin">
            {{timerText}}：<span class="second">{{Math.max(timer,0)}}</span>s
        </div>
        <div class="game-begin" v-if="!begin">
            <div class="kv-bg"></div>
            <div class="begin-btn" v-on:click="beginBtn"></div>
        </div>
        <div v-if="begin">
        <div class="card-box card-box-one" v-if="mission == 1">
            <div class="guidepost guidepost-one"></div>
            <div class="card-box-one-row">

                <img class="card back" :src="mapShow[0]" map-id="0" v-on:click="drawCard" ondragstart="return false;" >
                <img class="card back" :src="mapShow[1]" map-id="1" v-on:click="drawCard" ondragstart="return false;">
            </div>
            <div class="card-box-one-row">
                <img class="card back" :src="mapShow[2]" map-id="2" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[3]" map-id="3" v-on:click="drawCard" ondragstart="return false;">
            </div>
        </div>
        <div class="card-box card-box-two" v-if="mission == 2">
            <div class="guidepost guidepost-two"></div>
            <div class="card-box-one-row">
                <img class="card back" :src="mapShow[0]" map-id="0" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[1]" map-id="1" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[2]" map-id="2" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[3]" map-id="3" v-on:click="drawCard" ondragstart="return false;">
            </div>
            <div class="card-box-one-row">
                <img class="card back" :src="mapShow[4]" map-id="4" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[5]" map-id="5" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[6]" map-id="6" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[7]" map-id="7" v-on:click="drawCard" ondragstart="return false;">
            </div>
        </div>
        <div class="card-box card-box-three" v-if="mission == 3">
            <div class="guidepost guidepost-three"></div>
            <div class="card-box-one-row">
                <img class="card back" :src="mapShow[0]" map-id="0" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[1]" map-id="1" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[2]" map-id="2" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[3]" map-id="3" v-on:click="drawCard" ondragstart="return false;">
            </div>
            <div class="card-box-one-row">
                <img class="card back" :src="mapShow[4]" map-id="4" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[5]" map-id="5" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[6]" map-id="6" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[7]" map-id="7" v-on:click="drawCard" ondragstart="return false;">
            </div>
            <div class="card-box-one-row">
                <img class="card back" :src="mapShow[8]" map-id="8" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[9]" map-id="9" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[10]" map-id="10" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[11]" map-id="11" v-on:click="drawCard" ondragstart="return false;">
            </div>
            <div class="card-box-one-row">
                <img class="card back" :src="mapShow[12]" map-id="12" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[13]" map-id="13" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[14]" map-id="14" v-on:click="drawCard" ondragstart="return false;">
                <img class="card back" :src="mapShow[15]" map-id="15" v-on:click="drawCard" ondragstart="return false;">
            </div>
        </div>
        </div>
        <section class="popup" v-if="showAgain||showAchieve||showKnow">
            <section class="popup-wrap">
                <!--再来一次-->
                <section class="again-btn" v-if="showAgain" v-on:click="confirmGameOver"></section>
                <!--完成挑战-->
                <section class="achieve" v-if="showAchieve"></section>
                <!--know-it-->
                <section class="know-it-btn" v-if="showKnow" v-on:click="confirmBeginBtn"></section>

            </section>
        </section>
    </div>

</template>

<script>
    import md5 from 'js-md5';

    let box = ['apple','banana','blueberry','chicken','cow','egg','mangosteen','milk','orange','pear','sheep','socks'];
    export default {
        name: "DrawCard",
        data() {
            return{
                map:[],
                mapBox:[],
                mapShow:[],
                lastClick:'',
                begin:false,
                mission:1,
                isShow:false, //开局是不是给玩家看了，看了才能点
                timerText:'',
                timer:0,
                beginInterval:0,
                gameInterval:0,
                showAgain:false,
                showAchieve:true,
                showKnow:false,
                canClick:true,

            }
        },
        created(){
            // this.newMission();
            // console.log(this.$http);
            // this.btnLog('test');
            this.showModal('hide');
        },
        methods:{
            drawCard:function (event) {
                if(!this.isShow || !this.canClick){
                    return false;
                }
                let target = event.target;
                let mapId = target.getAttribute("map-id");
                let clickThis = this.mapShow[mapId];
                let that = this;
                if(this.lastClick === this.mapBox[mapId] || this.lastClick === ''){
                    this.$set(this.mapShow,mapId,this.mapBox[mapId]); //点对了，给他翻牌

                    // console.log('游戏成功');
                    this.lastClick === ''?this.lastClick = this.mapBox[mapId]:this.lastClick = '';
                }else{
                    this.$set(this.mapShow,mapId,this.mapBox[mapId]);//点错了，给他翻牌

                    this.canClick = false;
                    // this.gameOver(this.mission);
                    console.log('点错');
                    // this.gameOver(this.mission);
                    setTimeout(function () {  //等一会又翻回去
                        that.mapShow.forEach(function (value, index, array) {
                            that.$set(that.mapShow,index,'https://cdn.opapp.cn/legoCard/card-back.png');
                            that.lastClick = '';
                        });
                        that.canClick = true;
                        // that.$set(that.mapShow,mapId,clickThis);
                    },500);
                    // this.lastClick = ;
                }
                // console.log(this.mapBox[mapId]);
            },
            newMission(mission){
                let that = this;
                let gameTimer = 0;
                this.lastClick = '';

                //游戏开始
                this.begin = true;

                if(this.mission === 1){
                    this.map = getRandomArrayElements(box,2);
                    gameTimer = 15;
                }
                if(this.mission === 2){
                    this.map = getRandomArrayElements(box,4);
                    gameTimer = 30;

                }
                if(this.mission === 3){
                    this.map = getRandomArrayElements(box,8);
                    gameTimer = 60;

                }
                let map = this.map;
                let mapBox = [];
                let mapShow = [];

                let key = "ie376n34pik";
                let t = Math.floor(new Date().getTime() / 1000);

                map.forEach(function (value,index) {//先两两把牌放进mapBox
                    for(let i=0;i<2;i++){
                        let path = "/legoCard/";

                        mapBox.push("https://cdn.opapp.cn/legoCard/card-"+value+'.png');
                        mapShow.push('https://cdn.opapp.cn/legoCard/card-back.png');

                    }
                });
                this.lastClick = ''; //上次点击记录
                this.mapBox = mapBox.sort(function(){ return 0.5 - Math.random() }); //然后打乱mapBox
                this.mapShow = this.mapBox;
                that.isShow = false;
                that.timer = 5;
                that.timerText = '画面记忆倒计时';

                clearInterval(that.beginInterval);
                that.beginInterval = setInterval(function () {
                    that.timer--;
                    if(that.timer <= 0){
                        that.mapShow = mapShow;
                        that.isShow = true;//可以点了
                        that.timer = gameTimer;
                        that.timerText = '倒计时';

                        clearInterval(that.beginInterval);

                        clearInterval(that.gameInterval);
                        that.gameInterval = setInterval(function () {
                            that.timer--;
                            that.confirmNextMission();

                            if(that.timer <= 0) {
                                //时间到 GAMEOVER
                                // clearInterval(that.gameInterval);
                                that.gameOver(that.mission);
                            }

                        },1000)
                    }
                },1000);
                // this.mapShow = this.mapBox;


            },
            showModal(modal){
                this.btnLog('window-'+modal);

                if(modal == 'showAgain'){
                    this.showAgain = true;this.showAchieve=false;this.showKnow=false;
                }
                else if(modal == 'showAchieve'){
                    this.showAgain = false;this.showAchieve=true;this.showKnow=false;
                }
                else if(modal == 'showKnow'){
                    this.showAgain = false;this.showAchieve=false;this.showKnow=true;
                }
                else{
                    this.showAgain = false;this.showAchieve=false;this.showKnow=false;

                }
            },
            beginBtn(){
                this.mission = 1;
                this.showModal('showKnow');
                this.btnLog('btn-begin');


                // this.newMission();
            }, //游戏开始按钮，弹框确认
            confirmBeginBtn(){
                this.showModal('hide');
                this.newMission();
                this.btnLog('btn-beginConfirm');

            }, //确认游戏开始
            gameOver(mission){
                // console.log(this.gameInterval);
                clearInterval(this.gameInterval);
                clearInterval(this.beginInterval);
                this.mission = mission;
                this.canClick = true;
                this.showModal('showAgain');
                this.btnLog('gameOver');


            },
            confirmGameOver(){
                this.showModal('hide');
                this.newMission();
                this.btnLog('btn-gameOverConfirm-again');

                // this.begin = false;
            },
            confirmNextMission(){
                let missionLength = this.mapShow.length;
                let count = 0;
                let that = this;
                this.mapShow.forEach(function (value, index, array) {
                    // console.log(count);
                    if(value === that.mapBox[index]){
                        count++
                    }
                    if(count === missionLength){
                        that.btnLog('nextMissionBtn,nowMissionIs'+that.mission);

                        clearInterval(that.gameInterval);
                        clearInterval(that.beginInterval);
                        if(that.mission===3){
                            that.btnLog('gameSuccess');
                            console.log('游戏完成');
                            setTimeout(function () {
                                that.showModal('showAchieve');
                            },1500);
                        }
                        else{
                            that.mapShow = [];
                            that.mission++;
                            console.log('mission',that.mission);
                            setTimeout(function () {
                                that.newMission();
                            },1500);

                        }

                    }
                })

            },
            btnLog(button){
                let unixTime = Math.floor(new Date().getTime()/1000);

                this.$http.get('https://campaign.legowechat.com/duploflashcard/btnLogApi.php?button='+button+'&unixTime='+unixTime+'&token='+md5(unixTime+'iCRV1l0Is5OGuoRh'),{})
            }

        }
    }

    function getRandomArrayElements(arr, count) {
        let shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
        while (i-- > min) {
            index = Math.floor((i + 1) * Math.random());
            temp = shuffled[index];
            shuffled[index] = shuffled[i];
            shuffled[i] = temp;
        }
        return shuffled.slice(min);
    }
</script>

<style scoped>
    body,html{
        width: 100%;
    }
    .wrap{
        overflow:hidden;
        height: 100%;
    }
    .card-box{
        /*width: 1000px;*/
        /*height: 1000px;*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto 10% auto;
    }
    .guidepost{
        width: 400px;
        height: 200px;
        margin-bottom: 200px;
    }
    .guidepost-one{
        background: url("https://cdn.opapp.cn/legoCard/checkpoint-1.png")no-repeat top center/contain;
    }
    .guidepost-two{
        background: url("https://cdn.opapp.cn/legoCard/checkpoint-2.png")no-repeat top center/contain;
    }
    .guidepost-three{
        background: url("https://cdn.opapp.cn/legoCard/checkpoint-3.png")no-repeat top center/contain;
    }
    .card-box-one-row{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .card-box-one .card{
        margin: 30px;
        width: 500px;
    }
    .card-box-two .card{
        margin: 15px;
        width: 360px;
    }
    .card-box-three .card{
        margin: 10px;
        width: 280px;
    }
    .kv-bg{
        width: 100%;
        height: 1680px;
        background: url("https://cdn.opapp.cn/legoCard/kv-bg.png")no-repeat center 200px/contain;
    }
    .begin-btn{
        width: 100%;
        height: 240px;
        background: url("https://cdn.opapp.cn/legoCard/begin-btn.png")no-repeat center/contain;
    }
    .timer{
        position: absolute;
        right: 60px;
        top: 30px;
        font-size: 88px;
        z-index: 9;
    }
    .popup{
        height: 100%;
        width: 100%;
        background: rgba(0,0,0,0.5);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
    }
    .popup-wrap{
        width: 1200px;
        height: 900px;
        margin: 0 auto;
        margin-top: 15%;
        background: url("https://cdn.opapp.cn/legoCard/pop-bg.png") no-repeat center/contain;
    }
    .again-btn{
        width: 400px;
        height: 100%;
        margin: 0 auto;
        background: url("https://cdn.opapp.cn/legoCard/again-btn.png") no-repeat center/contain;

    }
    .achieve{
        width: 600px;
        height: 100%;
        margin: 0 auto;
        background: url("https://cdn.opapp.cn/legoCard/achieve-madel.png") no-repeat center/contain;
    }

    .know-it-btn{
        width: 800px;
        height: 100%;
        margin: 0 auto;
        background: url("https://cdn.opapp.cn/legoCard/know-it-btn.png") no-repeat center/contain;
    }

</style>
